const path = require('path')
//这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包号的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面，将来会根据值当的页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面的名称
        })
    ],
    module: {  //用于配置第三方模块加载器
        rules: [ //所有第三方模块匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理 .css文件的第三方loader规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less文件的第三方 loader 规则
            { test: /\.(png|gif|jepg|jpg|bmp)$/, use: 'url-loader?limit=17983&name=[hash:8]-[name].[ext]' },//处理图片的loader，
            //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，
            //如果图片小于limit值，则会被转为base64的字符串
            //url-loader?limit=777777&name=[hash:8]-[name].[ext]
            //name可以设置图片的名字，[hash:8]生成8位hash值，[name].[ext]生成与原图片相同的名字
            { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader' }, //处理字体文件的loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel来转换高级的ES语法
            { test: /\.vue$/, use: 'vue-loader' }, //处理.vue文件的loader
        ]
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}